<template>
    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>
</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;

    const init = () => {
      const $=go.GraphObject.make


       let  myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });


    myDiagram.nodeTemplate =
      $(go.Node, "Auto", // 使用Auto布局
        $(go.Shape, "RoundedRectangle", { fill: "white" }, // 节点形状为圆角矩形，填充为白色
          new go.Binding("fill", "color") // 绑定填充颜色到数据属性
        ),
        $(go.TextBlock, { margin: 8 }, // 文本块，边距为8
          new go.Binding("text", "text") // 绑定文本到数据属性的key字段
        )
      );


      let nodeDataArray = [
        {"category":"Comment", "loc":"60 100", "text":"Kookie Brittle", "key":-13,color:'blue'},
        {"key":-1, "category":"End", "loc":"175 100", "text":"Start",color:'blue'},
        {"key":0, "loc":"0 0", "text":"Preheat oven to 375 F",color:'blue'},
        {"key":1, "loc":"100 100", "text":"In a bowl,easpoon salt",color:'orange'},
        {"key":2, "loc":"175 200", "text":"Gradually fted flour",color:'orange'},
        {"key":3, "loc":"175 290", "text":"Mix inolate Morsels",color:'orange'},
        {"key":4, "loc":"175 380", "text":"Pressx10x1 pan",color:'orange'},
        {"key":5, "loc":"355 85", "text":"Finelyof nuts",color:'orange'},
        {"key":6, "loc":"175 450", "text":"Sprinkle nuts on top",color:'orange'},
        {"key":7, "loc":"175 515", "text":"Bake t cool",color:'orange'},
        {"key":8, "loc":"175 585", "text":"Cut into rectangular grid",color:'orange'},
        {"key":-2, "category":"End", "loc":"175 660", "text":"Enjoy!",color:'orange'}
      ]

      let linkDataArray = [
        {"from":1, "to":2, "fromPort":"B", "toPort":"T"},
        {"from":2, "to":3, "fromPort":"B", "toPort":"T"},
        {"from":3, "to":4, "fromPort":"B", "toPort":"T"},
        {"from":4, "to":6, "fromPort":"B", "toPort":"T"},
        {"from":6, "to":7, "fromPort":"B", "toPort":"T"},
        {"from":7, "to":8, "fromPort":"B", "toPort":"T"},
        {"from":8, "to":-2, "fromPort":"B", "toPort":"T"},
        {"from":-1, "to":0, "fromPort":"B", "toPort":"T"},
        {"from":-1, "to":1, "fromPort":"B", "toPort":"T"},
        {"from":-1, "to":5, "fromPort":"B", "toPort":"T"},
        {"from":5, "to":4, "fromPort":"B", "toPort":"T"},
        {"from":0, "to":4, "fromPort":"B", "toPort":"T"}
      ]
      myDiagram.layout = $(go.LayeredDigraphLayout);
      myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>